@import "../../util/util.css";

.rootnik--labs--logo {
  text-decoration: none;
  color: #fff;
}
.rootnik--labs--logo:hover {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
}
.col-sm-12 {
  position: initial;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
header {
  position: absolute;
  width: 100%;
  height: 95%;
  background: var(--secondary--background);
  box-sizing: border-box;
  padding: var(--padding-md);
  color: var(--white-color);
}

/* microsoft edge */
@supports (-ms-ime-align: auto) {
  header {
    position: absolute;
    width: 100%;
    height: 75vh;
    background: var(--secondary--background);
    box-sizing: border-box;
    padding: var(--padding-md);
    color: var(--white-color);
  }
  .main-header {
    position: absolute;
    width: 100%;
    height: 95%;
    background: var(--secondary--background);
    box-sizing: border-box;
    padding: var(--padding-md);
    color: var(--white-color);
  }
}

header {
  position: relative;
  z-index: 1;
}
header:after {
  background: inherit;
  content: "";
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
}

header:after {
  bottom: 0;
  transform: skewY(1.5deg);
  transform-origin: 0 0;
}

.header__label {
  color: var(--white-color);
  font-size: var(--font-sm);
  font-weight: 700;
  margin-left: 4%;
}
.header__hamburger {
  font-size: 30px;
  cursor: pointer;
  float: right;
  color: var(--primary--element);
  padding-right: 20px;
}

.header__overlay {
  height: 100vh !important;
  width: 0%;
  position: fixed;
  z-index: 100000 !important;
  top: 0 !important;
  right: 0;
  /* background-color: #202020; */
  overflow-x: hidden !important;
  transition: 0.5s;

  background: #131924;
  background: -webkit-linear-gradient(to right, #090d11, #141e30);
  background: linear-gradient(to right, #090d11, #141e30);
}

/* Ensure overlay covers banner when present */
body.has-banner .header__overlay {
  height: 100vh !important;
  top: 0 !important;
}
.header__overlay__section {
  z-index: 100000 !important;
  /* width: 0%; */
}
.header__overlay__content {
  position: relative;
  top: 10%;
  width: 100%;
  /* padding-left: 5%; */
  font-weight: lighter;
  font-size: var(--font-sm);
  line-height: var(--line-height-xl);
  z-index: 100001 !important;
}

.header__overlay a {
  /* padding: 9px; */
  padding: 6px 20px;
  text-decoration: none;
  font-size: 1.2rem;
  color: #b4adad;
  display: block;
  transition: 0.3s;
  line-height: 2rem;

  font-family: "roboto", sans-serif;
  font-weight: 700;
}
.header__overlay a:hover {
  padding: 6px 20px;
  text-decoration: none;
  font-size: 1.2rem;
  display: block;
  transition: all 0.3s;
  line-height: 2rem;
  font-family: "roboto", sans-serif;
  font-weight: 700;
  background-color: #000;
  border-right: 5px solid #7ffcf3;
  color: #fff;
}
/* .header__overlay a:hover,
.header__overlay a:focus {
  color: #fff;
} */

.header__overlay .header__overlay__closebtn {
  position: fixed !important;
  top: 3px;
  right: 45px;
  font-size: 35px;
  z-index: 100002 !important;
  cursor: pointer !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show close button only when overlay is explicitly open */
.header__overlay[style*="width: 32%"] .header__overlay__closebtn,
.header__overlay[style*="width: 35%"] .header__overlay__closebtn,
.header__overlay[style*="width: 100%"] .header__overlay__closebtn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Position close button below banner when present */
body.has-banner .header__overlay .header__overlay__closebtn {
  top: 55px !important;
  z-index: 100002 !important;
}

.header__overlay .header__overlay__closebtn:hover {
  position: fixed !important;
  top: 3px;
  right: 45px;
  font-size: 35px;
  display: block;
  background-color: none !important;
  border-right: none !important;
  color: #fff;
  z-index: 100002 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.has-banner .header__overlay .header__overlay__closebtn:hover {
  top: 55px !important;
  z-index: 100002 !important;
}

@media screen and (max-height: 450px) {
  .header__hamburger {
    font-size: 30px;
    cursor: pointer;
    float: right;
    color: var(--primary--element);
  }
  .header__overlay a {
    font-size: 20px;
  }
  .header__overlay .header__overlay__closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
    z-index: 100002 !important;
  }
  body.has-banner .header__overlay .header__overlay__closebtn {
    top: 50px !important;
  }
}
/****************************************** header content*******************************/

.header__content__leftsection {
  top: 15%;
  position: absolute;
  left: 8%;
}

.header__content__left__mainHeading {
  font-weight: 700;
  font-size: var(--font-xxl);
  line-height: 5rem;
}
.header__content__left__subHeading {
  font-size: var(--font-xs);
  position: absolute;
  width: inherit;
  color: var(--light--background);
}
.header__content__rightsection {
  position: absolute;
  right: 3%;
}

.header__button {
  display: inline-flex;
  height: var(--height-lg);
  width: auto;
  border: 2px solid var(--primary--element);
  margin-top: 6rem;
  color: #bfc0c0;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
  padding: 1.6rem 1rem;
}

a {
  color: var(--white-color);
  text-decoration: none;
  letter-spacing: 1px;
  font-weight: 700;
}

#button-header {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-header a {
  position: relative;
  transition: all 0.35s ease-Out;
  text-decoration: none !important;
}

#slide {
  width: 100%;
  height: 100%;
  left: -250px;
  background: var(--primary--element);
  position: absolute;
  transition: all 0.35s ease-Out;
  bottom: 0;
}

#button-header:hover #slide {
  left: 0;
}
#button-header:hover a {
  color: #2d3142;
}

.header__image {
  height: 42rem;
  margin-right: var(--margin-xxl);
}

.image--floating {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

/* css added */
.header__overlay__content .dropdown-toggle {
  /* padding: 8px; */
  padding: 6px 20px;
  text-decoration: none;
  font-size: 1.2rem;
  color: #c5c5c5;
  display: block;
  transition: 0.3s;
  line-height: 2rem;
  font-family: "roboto", sans-serif;
  font-weight: 700;
  cursor: pointer;
}
.dropdown-menu {
  background: #131924;
  background: -webkit-linear-gradient(to right, #090d11, #141e30);
  background: linear-gradient(to right, #090d11, #141e30);
  cursor: pointer;
  position: absolute;

  font-size: 0.7rem;
}
.header__overlay__content .dropdown-container .dropdown-item {
  font-size: 0.9rem !important;
  padding: 2px;
  font-family: "roboto", sans-serif;
  font-weight: 700;
  cursor: pointer;
}
.header__overlay__content .dropdown-container {
  display: none;

  padding-left: 8px;
  background: #131924;
  background: -webkit-linear-gradient(to right, #090d11, #141e30);
  background: linear-gradient(to right, #090d11, #141e30);

  font-size: 0.7rem;
  padding: 2px;
  font-family: "roboto", sans-serif;
  font-weight: 700;
  cursor: pointer;
}
.dropdown-container .dropdown-item:hover {
  background-color: #0f0e0e;
}

.dropdown-divider {
  color: #000;
  background-color: #000 !important;
  border-top: 1px solid #ffffff2f;
}